@import 'variables';

ranking-detail {
  header {
    padding: pxTorem(26) pxTorem(40) pxTorem(35) pxTorem(32);
    color: color($h5, c10);
    background-color: #4192f3;
    .team-info {
      .nick {
        font-size: standard($f, f1);
        color: color($h5, c10);
      }
      address {
        margin-top: pxTorem(12);
        font-size: standard($f, f6);
        color: rgba(255, 255, 255, 0.7);
        &:before {
          content: '';
          margin-right: pxTorem(16);
          @include icon(26, 26, '#{$icons-path}/icon_ranking_address@2x.png');
        }
        i {
          display: inline-block;
          margin-right: pxTorem(16);
        }
      }
    }
    seed-avatar,
    img {
      width: pxTorem(108);
      height: pxTorem(108);
      margin-right: pxTorem(32);
      border-radius: 50%;
    }
    .number {
      @include icon(170, 170, '#{$images-path}/ranking_background.png');
      display: flex;
      span {
        display: inline-block;
        margin-top: pxTorem(18);
        font-size: standard($f, f9);
        color: color($h5, c10);
      }
      p {
        font-size: standard($f, f6);
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
  .content {
    background-color: color($h5, c10);
    .md-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: pxTorem(26);
      margin-bottom: pxTorem(36);
      font-weight: 700;
      background-color: color($h5, c10);
      h2 {
        padding-left: pxTorem(20px);
        border-left: pxTorem(6px) solid color($h5, c1);
      }
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: pxTorem(40);
    }
    li {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 33.33%;
      padding: pxTorem(44) 0;
      &:last-of-type,
      &:nth-child(3n) {
        p {
          border-right: none;
        }
      }
      div{
        width: 100%;
      }
      p {
        width: 100%;
        text-align: center;
        border-right: 1px solid color($h5, c9);
      }
      span {
        font-size: standard($f, f18);
        color: color($h5, c2);
      }
    }
    em {
      display: block;
      font-size: standard($f, f4);
      color: color($h5, c4);
    }
  }
}
